<template>
  <div>
    <!-- 二次封装一个form -->
      <el-form inline v-if="closeFlag">
        <el-form-item v-for="item in props.formData" :label="item.label" >
           <el-input  v-model="queryData[item
            .prop]" v-if="item.type=='input'":placeholder="item.placeholder">
            </el-input>

            <el-select style="width:200px;" v-model="queryData[item.prop]" v-if="item.type=='select'" :placeholder="item.placeholder">
                 <el-option v-for="pitem in item.options" :label="pitem.label" :value="pitem.value">

                 </el-option>
            </el-select>
            <el-date-picker v-model="queryData[item.prop]" v-if="item.type=='date'"
            type="daterange"
            :placeholder="item.placeholder">

            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search"
          @click="sendData">查询</el-button>
          <el-button icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <slot></slot>
      </div>
  </div>
</template>
<script setup>
// 封装组件的思路
  // 1.统一了公共样式
  // 2.设计了哪些父传子
  // 3.设计哪些子传父 
  // 5.设计哪些插槽
  // 6.设计哪些方法
  // 7.设计动态动态样式

  import {defineExpose,ref,defineProps,defineEmits,reactive} from 'vue'
 import {parseTime} from '@/utils/ruoyi'
let queryData=reactive({
  params:{
    beginTime:"",
    endTime:""
  }
})

  let  props= defineProps({
    formData:{
      type:Array,
      default:()=>[]
    },
    formItemStyle:{
      type:Object,
      default:()=>{}
    }
  })
  // 子传父
  let emit=defineEmits(['sendQuery'])
  let sendData=()=>{
    // 点击搜索的时候  把数据传给父组件
  //  给父组件传数据的时候 如果里面有时间 将时间处理下传送
  if(queryData.createTime){
    queryData.params['beginTime']=parseTime(queryData.createTime[0],'{y}-{m}-{d}')
    queryData.params['endTime']=parseTime(queryData.createTime[1],'{y}-{m}-{d}')
  }
    delete queryData.createTime //删除对象属性
    emit('sendQuery',queryData)
  }
  let closeFlag=ref(true)
 let close=()=>{
  closeFlag.value=false
 }
//  显示
 let show=()=>{
  closeFlag.value=true
 }
//  设计的方法
 defineExpose({
  close,
  show
 })
</script>